<template lang="pug">
.view-header
  a-select(
    v-model:value="contentJson.currentPage"
    style="width:220px"
    placeholder="请选择页面"
    @change="handleChange")
    a-select-option(
      v-for="(item, index) in contentJson.pages"
      :key="index"
      :value="item.key") {{item.label}}
  .btn-box
    a-button(type="primary" @click="addPage") 添加页面
    a-popconfirm(
      title="是否删除页面"
      ok-text="是"
      cancel-text="否"
      @confirm="confirm"
      @cancel="cancel")
      a-button(style="margin-left:10px;" type="primary" danger) 删除当前页面
</template>

<script lang="ts">
import { ref, defineComponent, computed } from "vue";
import { useStore } from "vuex";
import { createHash } from "../json/tool";
import { message } from "ant-design-vue";
export default defineComponent({
  name: "",
  setup() {
    const store = useStore();
    const contentJson = computed(() => {
      return store.state.lowCode.contentJson;
    });
    const handleChange = (value: string) => {
      console.log(`selected ${value}`);
    };
    const addPage = () => {
      const key = createHash(6);
      const page = {
        label: "页面" + key,
        key: key,
        list: [],
      };
      contentJson.value.pages.push(page);
      message.success(`页面${key}添加成功`);
    };
    const confirm = (e: MouseEvent) => {
      const pages = contentJson.value.pages;
      if (pages.length <= 1) {
        message.error("必须至少保留1个页面");
        return;
      }
      // 获取当前页面索引
      let index = 0;
      pages.forEach((item: any, idx: number) => {
        if (item.key === contentJson.value.currentPage) {
          index = idx;
        }
      });
      contentJson.value.pages.splice(index, 1);
      // 默认选中第一个页面
      contentJson.value.currentPage = contentJson.value.pages[0].key;
      message.success("删除页面成功");
    };
    const cancel = (e: MouseEvent) => {
      console.log(e);
    };
    return {
      contentJson,
      handleChange,
      addPage,
      confirm,
      cancel,
    };
  },
});
</script>

<style lang="stylus" scoped>
.view-header {
  padding: 10px;
  border-bottom: solid 1px #e6e6e6;
  display: flex;
  .btn-box {
    margin-left: 20px;
  }
}
</style>
